<template>
    <div class="hpsipal">
        <!-- 头部 -->
        <div class="header">
            <div><i class="iconfont icon-user"></i>上海市</div>
            <div>医疗救治顶点医院和发热门诊一览</div>
        </div>
        <!-- 医院展示区 -->
        <div class="content" style="margin-top:160px">
            <div style="width:150px">
                <el-input v-model="input" placeholder="请输入医院名称"></el-input>
            </div>
           
            <div>
                <el-row v-for='item in tableData' :key='item.id'>
                  <el-col :span="24"><div class="grid-content bg-purple-dark">
                      <div class="left">
                          <div>{{item.name}}</div>
                          <div>{{item.flags}}</div>
                          <div>{{item.province}} {{item.city}} {{item.area}}</div>
                      </div>
                      <div class="right">
                          
                          <div>距离</div>
                          <div><i class="iconfont icon-map"></i></div>
                      </div>
                      </div></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import axios from '@/http/axios'
export default {
    data(){
        return{
            input:'',
            tableData:[],
            params:{
                page:1,
                pageSize:10
            }
        }
    },
    created(){
        this.query_hospital()
    },
    methods:{
        query_hospital(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params

            }).then((res)=>{
                this.tableData=res.data.data.list
            })
        }
    }
}
</script>
<style scoped>
.iconfont {
    font-size: 30px;
}
.icon-user{
    font-size: 26px;
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 90px;
    padding: 0 10px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

.left{
    float: left;
    height: 90px;
}
.left div{
    line-height: 30px;
}
.right div{
    line-height: 45px;
}
.right{
    float: right;
    height: 90px;
}

 .header{
     padding: 50px;
     height: 150px;
     background-image: url('http://121.199.29.84/visual/static/img/bg1.efce26ef.png');
     position: absolute;
     top:0;
     left:0;
     right:0;
     font-size:20px;
     color:white;
     font-weight:700

 }
</style>